<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model.trim="query.formId" clearable placeholder="formId" style="width: 200px;" class="filter-item" @keyup.enter.native="search" />
      <el-input v-model.trim="query.deal" clearable placeholder="接口类型" style="width: 200px;" class="filter-item" @keyup.enter.native="search" />

      <el-input v-model.trim="query.content" clearable placeholder="参数内容" style="width: 200px;" class="filter-item" @keyup.enter.native="search" />

      <el-input v-model.trim="query.note" clearable placeholder="说明" style="width: 200px;" class="filter-item" @keyup.enter.native="search" /><!--<el-select v-model.trim="query.logLevel" placeholder="日志级别" clearable class="filter-item" style="width: 130px">
        <el-option v-for="item in level" :key="item.key" :label="`${item.name}`" :value="item.index" />
      </el-select>
      <el-select v-model.trim="query.opType" placeholder="操作类型" clearable class="filter-item" style="width: 130px">
        <el-option v-for="item in type" :key="item.key" :label="`${item.name}`" :value="item.index" />
      </el-select>
      <el-select
        v-model="query.userId"
        clearable
        filterable
        placeholder="请选择用户"
        class="filter-item">
        <el-option
          v-for="user in users"
          :key="user.iid"
          :label="user.realName+' '+' '+user.tel"
          :value="user.iid"/>
      </el-select>-->
      <el-button style="margin-left:20px;" class="filter-item" type="primary" icon="el-icon-search" @click="search">
        {{ $t('table.search') }}
      </el-button>
    </div>
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      highlight-current-row
      border
    >
      <el-table-column
        width="100"
        prop="formId"
        label="formId"
      />
      <el-table-column
        width="130"
        prop="deal"
        label="接口类型"
      />

      <el-table-column
        prop="content"
        label="参数内容"
      />
      <el-table-column
        prop="note"
        label="说明"
      />
      <el-table-column
        prop="failMsg"
        label="错误信息"
        width="330"
      />
      <el-table-column
        prop="failNum"
        label="失败次数"
      />
      <el-table-column
        width="160"
        prop="createTime"
        label="创建时间"
        sortable
      >
        <template slot-scope="{row}">
          <span>{{ row.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>

    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="query.pageIndex" :limit.sync="query.pageSize" @pagination="getInfor" />
  </div>
</template>
<script>
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { getAllInfo, faceerror } from '@/api/systemLog'
import { getList as getUserList } from '@/api/user'
import { deepClone, arraryRemove } from '../../../utils'
export default {
  name: 'SystemLog',
  components: { Pagination },
  data() {
    return {
      total: 0,
      loading: true,
      currentPage: 1,
      pagesize: 10,
      users: [],
      type: [{
        name: '新增',
        index: 1
      },
      {
        name: '修改',
        index: 2
      },
      {
        name: '删除',
        index: 3
      },
      {
        name: '导入',
        index: 4
      },
      {
        name: '确认',
        index: 5
      },
      {
        name: 'WS请求',
        index: 6
      }
      ],
      level: [{
        name: '调试',
        index: 0
      },
      {
        name: '信息',
        index: 1
      },
      {
        name: '异常',
        index: 2
      }],
      query: {
        pageIndex: 1,
        pageSize: 10
        // username: '',
        // realName: '',
        // status: ''
      },
      tableData: []
    }
  },
  //   created() {
  //     this.getInfor()
  //     // this.getUserList()
  //   },
  mounted() {
    this.getInfor()
    // this.getUserList()
  },
  methods: {
    // handleSizeChange: function(size) {
    //   this.pagesize = size
    // },
    // handleCurrentChange: function(currentPage) {
    //   this.currentPage = currentPage
    // },
    getUserList() {
      getUserList().then((res) => {
        this.users = res.data
      })
    },
    search() {
      this.getInfor()
    },
    checkSpecialKey(str) {
      var specialKey = "[`~!#$^&*()=|{}':;'\\[\\]<>/?~！#￥……&*（）——|{}【】‘；：”“'。，、？]‘'"
      for (var i = 0; i < str.length; i++) {
        if (specialKey.indexOf(str.substr(i, 1)) != -1) {
          return false
        }
      }
      return true
    },

    getInfor() {
      const obj = deepClone(this.query)
      //  obj.opcontent=obj.opcontent.toString()
      //  if(!this.checkSpecialKey(obj.opcontent)){
      //   this.$message({
      //     type: 'warning',
      //     message: '不能带有特殊字符，例如[]'
      //   })
      //   return false
      //  }
      this.loading = true
      faceerror(obj)
        .then(res => {
          this.tableData = res.data.items
          this.total = res.data.totalItems
          console.log('111', this.total)

          this.loading = false
        }).catch(() => {
          this.loading = false
        })
    }
  }
}
</script>
